import React, { Fragment } from 'react'
import { Text, StyleSheet } from 'react-native'
import { WebView } from 'react-native-webview'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import { CommonToast, ShowLoading, DismissLoading } from 'src/utils/ToastUtil'
import BasePage from 'src/pageP/base/base-page/index'

export default class CommonWebView extends BasePage {
  constructor (props) {
    super(props)
    const {
      navigation: {
        state: { params }
      }
    } = this.props
    const { source, title } = params
    this.state = {
      header: {},
      title,
      source
    }
    this.params = params
  }

  childRender () {
    const { source } = this.state
    return (
      <WebView
        style={styles.container}
        source={source}
        originWhitelist={['*']}
        useWebKit={true}
        allowFileAccess={true}
        javaScriptEnabled={true}
        allowFileAccessFromFileURLs={true}
        domStorageEnabled={true}
        mixedContentMode="always"
        onLoadStart={this.onLoadStart}
        onLoadEnd={this.onLoadEnd}
      />
    )
  }

  onLoadStart = () => {
    ShowLoading()
  }

  onLoadEnd = syntheticEvent => {
    // update component to be aware of loading status
    const { nativeEvent: { title } } = syntheticEvent
    !this.state.title && this.setState({
      title
    })
    DismissLoading()
  }

  renderBottomView () {}

  renderNavigationBarChild () {
    const { title } = this.state
    return <Fragment>{title && <Text style={styles.naviTitle}>{title}</Text>}</Fragment>
  }
}
// https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md#source

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  naviTitle: {
    fontSize: ScaleT(17),
    color: '#030303',
    fontWeight: '400'
  }
})
